<template>
<!--  数据监测看板-->
  <div class="s-map">
    <point-map class="point-map"></point-map>
    <div class="left-box" ref="lefts" :class="{ active: isActive }">
      <div class="left-btn" @click="shrink()">
        <div class="leftTriangle" v-show="isActive == false">收起</div>
        <div class="leftTriangle2" v-show="isActive == true">展开</div>
      </div>
      <el-card class="leftCard-first">

        <i class="icongongchengxiangmu iconfont local-c">工程：{{projectCounts.projectNum}}</i>
        <i class="icontakan iconfont local-c">工点：{{projectCounts.workPointNum}}</i>
        <i class="iconjiancedianguanli iconfont local-c">监测点：{{projectCounts.monitorNum}}</i>

      </el-card>
      <div class="left-card">
        <el-card class="grid-content s-grade leftGrid">
          <h3 style="">工程行政区分布统计</h3>
          <div ref="chartsProvince" class="pie-charts"></div>
        </el-card>
        <el-card class="leftGrid">
          <h3 style="">工程所属行业占比统计</h3>
          <div ref="chartsTrade" class="pie-charts"></div>
        </el-card>
        <el-card class="leftGrid">
          <h3 style="">监测类型占比统计</h3>
          <div ref="chartsMonitor" class="pie-charts"></div>
        </el-card>
      </div>
    </div>

    <div class="s-center">
      <el-row :gutter="10" class="on-line">
        <el-col :span="12">
          <el-card shadow="always"  class="centerCard">
            <i class="el-icon-bangzhu"></i>
            <span>设备在线:</span>
            <span>{{ onLinelist.onlineCount }}</span>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always" class="centerCard">
            <i class="el-icon-bangzhu"></i>
            <span> 设备离线:</span>
            <span>{{ onLinelist.offlineCount }}</span>
          </el-card>
        </el-col>
      </el-row>
      <collapse-wrap title="最新数据">
        <!-- table -->
        <div class="new-data">
          <el-table :data="tableList" border height="187"  ref="table" @row-click="clickData">
            <el-table-column prop="workPointName" show-overflow-tooltip label="位置" min-width="200">
            </el-table-column>
            <el-table-column prop="monitorTypeName" show-overflow-tooltip label="监测类型" width="120">
            </el-table-column>
            <el-table-column prop="createTime" label="数据采集时间" width="160">
              <template slot-scope="scope">
                {{scope.row.createTime|formatTimer()}}
              </template>
            </el-table-column>
            <el-table-column prop="recordValueName" show-overflow-tooltip label="数据" min-width="150">
            </el-table-column>
            <el-table-column prop="warningLevelName" label="预警等级" width="100">
              <template slot-scope="scope">
                <el-button size="mini" :style="scope.row.warningLevelName | gradeColor" class="s-white">
                  {{scope.row.warningLevelName?scope.row.warningLevelName:'正常'}}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </collapse-wrap>
    </div>

    <div class="right-box" ref="lefts" :class="{ active2: isActive2 }">
      <div class="right-btn" @click="shrink2()">
        <div class="rightTriangle" v-show="isActive2 == false">收起</div>
        <div class="rightTriangle2" v-show="isActive2 == true">展开</div>
      </div>
      <div class="right-card">
        <el-card class="rightCard-first">
          <i class="iconshujukanban iconfont local-c">数据监测量：{{projectCounts.monitorRecordNum}}</i>
        </el-card>
        <el-card class="rightCards">
          <h3>预警等级</h3>
          <el-card
            class="grade-card card-concent"
            shadow="always"
            v-for="item in countWarn"
            :key="item.warningLevel"
            :style="item.warningLevelName | gradeColor">
            <i class="el-icon-s-operation"> </i>
            <i class="grade-word">{{ item.warningLevelName }}</i>
            <div class="grade-box">
              <p>
                <span>数量：</span><span>{{ item.num }}</span>
                <span>占比：</span><span>{{ item.percent }}%</span>
              </p>
              <el-progress
                :show-text="false"
                class="s-progress"
                :percentage="item.percent"></el-progress>
            </div>
          </el-card>
        </el-card>
        <el-card class="rightCards rightCardLast">
          <h3>最新预警消息</h3>
          <div class="warn-info">
            <el-card
              class="grade-card small-grade-card"
              shadow="always"
              v-for="item in tableWarnList"
              :key="item.id"
              ref="latestNews">
              <div class="s-warning" >
                {{ item.projectName }},{{ item.workPointName }}处于报警状态,{{
                item.workPointName
                }}
                引发预警监测类型为{{ item.monitorTypeName }},监测点为{{
                item.monitorPointName
                }},{{ item.recordValueName }}
              </div>
              <el-button
                type="primary"
                size="mini"
                @click="seeDetail(item)"
                plain
              >查看</el-button
              >
            </el-card>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import CollapseWrap from '@/components/collapse-wrap'
import PointMap from '@/views/monitor/work-point-map.vue'
import Format from '@/utils/format'
import {
  countWarnList,
  queryRecentList,
  cityCountList,
  listTypeCount,
  listIndustryCount,
  listMonitorTypeCount,
  deviceOnlineStatus,
  projectCount
} from '@/services/model/project-info.js'
import {
  recordWarningList
} from '@/services/model/warning.js'
const Echarts = require("echarts");
export default {
  components: {
    CollapseWrap,
    PointMap,
  },
  data() {
    return {
      isActive2: false,
      isActive: false,
      onLinelist: "",
      myPieCharts: "",
      myBarCharts: "",
      formWarn: {
        page: 1,
        pageSize: 5,
      },
      form: {
        page: 1,
        pageSize: 10,
      },
      charts: "",
      countWarn: [],
      tableList: [],
      tableWarnList: [],
      projectCounts: {
        projectNum: '',
        workPointNum: '',
        monitorNum: '',
        monitorRecordNum: '',
      },
    };

  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer));
    },
    // 预警等级颜色
    gradeColor(val) {
      switch (val) {
        case "正常":
          return "background-color:#0DC26B !important";
        case "I级预警":
          return "background-color:#0073b7 !important";
        case "II级预警":
          return "background-color:#f39c12 !important";
        case "III级预警":
          return "background-color:#ff851b !important";
        case "IV级预警":
          return "background-color:#e43321 !important";
        default:
          return "background-color:#0DC26B !important";
      }
    },
  },
  computed: {
    newDatas() {
      return this.$store.state.newDataList;
    },
  },
  watch: {
    newDatas(val) {
      if (val.type === 2) {
        // 预警
        this.tableWarnList.unshift(val.data);
      } else {
        // 非预警
        this.tableList.unshift(val.data);
      }
    },
  },
  methods: {
    shrink() {
      this.isActive = !this.isActive;
    },
    shrink2() {
      this.isActive2 = !this.isActive2;
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1;
      return param;
    },
    seeDetail(row) {
      this.$router.push({
        path: "/info-mgmt",
      });
    },
    // 最新数据行点击
    clickData(row) {
      this.$router.push({
        path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
      });
    },
    // 柱状图
    barCharts(refFlag, cityName, cityNum) {
      this.myBarCharts = Echarts.init(refFlag, null, {
        locale: "ZH",
      });
      let option = {
        grid: {
          left: "10px",
          right: "10px",
          bottom: "0px",
          top: "20px",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: cityName,
          textStyle:{
            color:'white',
            fontSize:'16px',
            weight:'600'
          }
        },
        yAxis: {
          type: "value",
           axisLabel: {
            textStyle: {
              color: "white",
              //字体自适应
            },
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "red",
                  },
                },
              },
            },
            data: cityNum,
            type: "bar",
            barWidth: "10px",
          },
        ],
      };
      this.myBarCharts.setOption(option);
    },
    // 饼图
    pieCharts(refFlag, nameList, val, name) {
      this.myPieCharts = Echarts.init(refFlag, null, {
        locale: "ZH",
      });
      let option = {
        title: {
          text: "",
          subtext: "",
          left: "center",
          textStyle: {
            fontSize: "50",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          left: "left",
          data: nameList,
            textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 12
                        }
        },
        series: [
          {
            name: name,
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: val,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myPieCharts.setOption(option);
    },
    // 预警等级占比
    async warnCountList(val) {
      let res = await countWarnList(val);
      let countWarn = res.data ? res.data : [];
      let warnAllCount = countWarn.reduce(
        (acc, current) => acc + parseInt(current.num),
        0
      );
      if (warnAllCount === 0) {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: 0,
          }; // 占比
        });
      } else {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: parseInt((item.num / warnAllCount) * 100),
          }; // 占比
        });
      }
    },
    // 最新数据
    async queryList() {
      let reqData = { projectId: "", pageSize: this.form.pageSize };
      let res = await queryRecentList(reqData);
      this.tableList = res.data ? res.data : [];
    },
    // 行政区分布统计
    async ecityCount() {
      let res = await cityCountList();
      let list = res.data ? res.data : [];
      let cityName = list.map((x) => x.cityName);
      let cityNum = list.map((x) => x.num);
      this.barCharts(this.$refs.chartsProvince, cityName, cityNum);
    },
    // 工点所属类型占比统计
    async listTypePoint() {
      let res = await listTypeCount();
      let list = res.data ? res.data : [];
      let nameList = list.map((x) => x.bianpiTypeName);
      let val = list.map((x) => {
        return {
          value: x.num,
          name: x.bianpiTypeName,
        };
      });
      this.pieCharts(this.$refs.chartsWorkPoint, nameList, val,
        "工点所属类型占比统计"
      );
    },
    // 工程所属行业占比统计
    async listIndustry() {
      let res = await listIndustryCount();
      let data = res.data ? res.data : {};
      let nameList = data.map((x) => x.name);
      this.pieCharts(this.$refs.chartsTrade, nameList, data, "工程所属行业占比统计");
    },
    // 监测类型占比统计
    async listMonitorType() {
      let res = await listMonitorTypeCount();
      let data = res.data ? res.data : {};
      let nameList = data.typeCount.map((x) => x.name);
      this.pieCharts(this.$refs.chartsMonitor, nameList, data.typeCount, "监测类型占比统计");
    },
    // echart随着窗口改变
    echartResize() {
      this.myPieCharts.resize();
      this.myBarCharts.resize();
    },
    // 设备在线离线数
    async deviceOnlineList(val) {
      let res = await deviceOnlineStatus(val);
      this.onLinelist = res.data ? res.data : [];
    },
    // 最新预警消息
    async queryWarnList() {
      let res = await recordWarningList(this.formWarn);
      this.tableWarnList = res.data?.records;
    },
    // 获取项目，工点，监测点，监测数据计数
    async queryProjectCount () {
      let res = await projectCount()
      this.projectCounts = res.data
    }
  },
  created() {
    this.queryList();
    this.queryWarnList();
  },
  mounted() {
    // 拿到表格挂载后的真实DOM
    const table = this.$refs.table
    // 拿到表格中承载数据的div元素
    const divData = table.bodyWrapper
    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
    setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
        // 重置table距离顶部距离
        divData.scrollTop = 0
      }
    }, 100);

    // 拿到表格挂载后的真实DOM

    // 工程所属行业占比统计
    this.listIndustry();
    // 监测类型占比统计
    this.listMonitorType();
    // 行政区分布统计
    this.ecityCount();
    // 预警等级占比
    this.warnCountList();
    // 设备在线离线数
    this.deviceOnlineList();
    // 项目，工点，监测点，监测数据计数
    this.queryProjectCount()
    window.addEventListener("resize", this.echartResize);
    window.addEventListener('resize', this.echartResize)

  },

  beforeDestroy() {
    window.removeEventListener("resize", this.echartResize);
  },

};
</script>
<style scoped="scoped" lang="less">

  body {
    height: 70%;
    width: 100%;
    background: #1b1b1b !important;
  }

  .s-map {
    // line-height: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    background: #1b1b1b !important;
    overflow: hidden;
    height: 860px;
    .weather {
      height: 100px;
      width: 300px;
      margin: 0 auto;
    }
    .point-map {
      width: 100%;
      height: 100%;
    }

    .s-left {
      width: 25%;
      position: absolute;
      left: 0px;
      top: 0;
      top: 0;
      z-index: 1999;
      // background: #212d39 !important;
      height: 100%;
      overflow-y: auto;
      // overflow: hidden;
      .el-card {
        width: 100%;
        // overflow: auto;
        margin-bottom: 9px;
        text-align: center;
        background: linear-gradient(to bottom, #31f1ff96, #ffffff);
        // background:linear-gradient(to top, #ffffff7a,#bdbdbd00,) ;
        // background: rgba(0, 0, 0, 0.233);

        padding: 7px 8px;
        border-radius: 5px;
        // box-shadow: 0 0 8px 0 #eee;
        // color: #fff;
        // backdrop-filter: blur(200px);
        // background: #00000031;

        h3 {
          font-size: 20px;
          font-weight: 600;
          margin: 10px 0;
          color: #ffffff;
        }
      }
    }

    .s-center {
      position: absolute;
      left:21%;
      // right: 26%;
      // background: red !important;
      bottom: 0;
      // top: 50%;
      height: 250px;
      z-index: 1999;
      width: 58%;
      overflow: hidden;
.centerCard{
  background: #1b1b1b !important
;
}
      .on-line {
        /deep/.el-card {
          background-color: rgba(255, 255, 255, 0.7);
          font-size: 16px;
        }
        margin-bottom: 10px;
      }
      .el-table{
        width: 100%;
        height:100% !important;
      }
      /deep/.el-table {
        td,
        th {
          padding: 5px !important;
        }
      }
    }
    .new-data{
      width: 100%;
      height: 150px !important;
    }


    .pie-charts {
      height: 188px;
      // background: red;
      display: flex;
      // width: 20%;
      /*justify-content: center;*/
      align-content: center;
    }

    .collapse {
      background-color: transparent !important;

      /deep/.title {
        padding: 5px 10px !important
      }

      /deep/.content {
        padding: 5px 0px !important;
      }
    }
  }
  .s-white {
    color: #ffffff;
  }
  // 预警等级
  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 13px;
    // background: red!important;;
    // width: 80%;
    height: 80px;
    // display: flex;
    // align-items: center;
    // justify-content: center;

    /deep/.el-card__body {
      // padding: 10px;
      display: flex;
      /*justify-content: center;*/
      align-items: center;
    }

    /deep/.el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      width: 60%;
    }

    /deep/.s-progress {
      display: block;
      width: 100%;

      /deep/.el-progress-bar__outer {
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }
  .warn-info {
    height: 50% !important;
    // background: red !important;


    overflow: auto;
    .el-card{
        background: linear-gradient(to bottom, #31f1ff96, #ffffff);

    }
    .small-grade-card {
      width: 100%;
      height:74%;
      position: relative;
      line-height: 14px;
      // overflow: auto;

    }
    .s-warning {
      font-size: 12px;
      color: #3e3e3e;
      /*background: red;*/
    }
    .el-button{
      position: absolute;
      bottom: 5px;
      right: 10px;
      width: 40px;
      height: 20px;
      font-size: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color:#1990FE
      // line-height: 10px;
    }

    .el-button:hover {
      background: #1990FE !important;
      color: white;
    }
  }
  // 修改 collape 样式
  /deep/.collapse .title {
    background: #1b1b1b !important;
    div {
      color: #1990FE !important;
      span {
        color: #1990FE !important;
      }
    }
  }

  .page_main{
    background: yellow !important;
    width: 100%;
    height: 230px !important;
  }
  // 左边
  .left-box{
    width: 20%;
    height: 100%;
    background:#1b1b1b36 !important;
    box-shadow: 2px -8px 6px black;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    transition:  transform 1s;
    // transform: translateX(100%)


  }
  .left-card{
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important;
    //  background: linear-gradient(to bottom, #31f1ff96, #ffffff);
    .el-card{
      margin-bottom: 10px;
      background: linear-gradient(to bottom, #31f1ff96, #ffffff) !important;
      padding: 7px 8px;
      border-radius: 5px;
      // box-shadow: 0 0 8px 0 #eee;
      color: #fff;

      backdrop-filter: blur(200px);
      // display: flex;
      justify-content: center;
      z-index: 99;
      h3{
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 10px;

      }
    }

  }
  .active{
    width: 20%;
    height: 100%;
    background:#1990FE;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    transition:  transform 1s; transform: translateX(-100%)
    //  animation: moveLeft 1s;

  }
  .left-btn{
    width: 35px;
    height:100px;
    background: #1990FE;
    position: absolute;
    top: 35%;
    right: -36px;
    border-radius: 0 10px 10px 0;
    font-size: 20px;
    color: white;
    //  transform: translateY(-65px);
    //  z-index: 1;
    .leftTriangle,.leftTriangle2{
      line-height: 30px;

      width: 36px;

      // background: yellow;
      position: relative;
      top: 20px;
      left:6px;
    }


  }
  .leftCard-first{
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    background: linear-gradient(to bottom, #31f1ff96, #ffffff) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    i{
      color: black;
      display: inline-block;
      margin-right: 20px;
      font-size: 16px;
      font-weight: 600;


    }

  }
  // 右边
  .right-box{
    width: 20%;
    height: 100%;
    background:#1b1b1b36 !important;
    box-shadow: -2px -8px 6px black;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2000;
    transition:  transform 1s;
    // overflow: auto;
    // transform: translateX(100%)


  }
  .right-btn{
    // z-index: 99;
    width: 35px;
    height:100px;
    background: #1990FE;
    position: absolute;
    top: 35%;
    left: -35px;
    border-radius:  10px 0 0 10px ;
    font-size: 20px;
    color: white;
    //  transform: translateY(-65px);
    //  z-index: 1;
    .rightTriangle,.rightTriangle2{
      line-height: 30px;

      width: 36px;

      // background: yellow;
      position: relative;
      top: 20px;
      left: 10px;
    }


  }
  .active2{
    width: 20%;
    height: 100%;
    background:#1990FE;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2000;
    transition:  transform 1s;
    transform: translateX(100%)

  }
  .right-card{
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99 !important;
    h3{
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
      text-align: center;
    }
    .rightCards{
      margin-bottom: 20px;
      background: linear-gradient(to bottom, #31f1ff96, #ffffff) !important;
      padding: 7px 8px;
      border-radius: 5px;
      // box-shadow: 0 0 8px 0 #eee;
      color: #fff;
      backdrop-filter: blur(200px);
      z-index: 99 !important;

    }
    .rightCardLast{
      height: 380px ;
      width: 100%;
      overflow: auto;
    }
  }
  .rightCard-first{
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
    background: linear-gradient(to bottom, #31f1ff96, #ffffff) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    i{
      color: black;
      display: inline-block;
      margin-right: 20px;
      font-size: 16px;
      font-weight: 600;


    }

  }
  .small-grade-card {
    background: #1990FE;
    width: 100%;
    height:80px !important;
    position: relative;
    line-height: 14px;
    overflow: auto;

  }
  .card-concent{
    // background: red !important;
    height: 50px !important;
  }
</style>
